const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin') 
const  { CleanWebpackPlugin }  =require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    devServer:{ // 开发
    //   contentBase: path.join(__dirname, 'public'),
        compress: true , // 会 gzip(压缩) 和 serve(服务) 所有来自项目根路径下 dist/ 目录的文件：
        open: true , // 将运行进度输出到控制台。
        progress:true , // 显示进度条
        hotOnly: true , // 启动热更新
        port: 9000 , // 端口
        proxy: {
        '/baseApi/*': {
          target: 'http://localhost:3000/', // 测试
          changeOrigin: true, // 设置为true, 本地就会虚拟一个服务器接收你的请求并代你发送该请求,
          secure: false,  // 如果是https接口，需要配置这个参数
          pathRewrite: {
            ['^' + '/baseApi']: ''
          }
        }
      }
    },
    mode:'development' , // 生产 production  开发 development
    entry: './src/main.js', // 入口文件
    output: { // 输出
        filename: 'bundle.js', // 指定输出文件的文件名称
        path: path.join(__dirname, 'dist') // path 指定输出的目录
    },
    resolve: {  // 配置别名
        alias: {
            "@":path.resolve("src"),
            }
    },  
    module: { // 配置相应的 loader
        rules: [
          {
            test: /\.css$/,
            // 对同一个模块使用多个 loader，注意顺序
            use: [
              'style-loader',
              'css-loader'
            ]
          },
          {
            test: /\.scss$/,
            // 对同一个模块使用多个 loader，注意顺序
            use: [
              'style-loader',
              'css-loader',
              'sass-loader'
            ]
          },
          {
            // url-loader 可以在文件比较小的时候直接变成base64
            test:/\.(png|jpg|gif|svg|bmp|jpeg)/,
            use:{
                loader :'url-loader',
                options: {
                    limit: 10000,
                    esModule: false,
                    name: '[name].[ext]?[hash]'
                }
            }
          },
          {
            test:/\.(html|htm)$/,
             use:'html-withimg-loader', // 解析 html中的图片资源
          },
          {
            test:/\.vue$/,
            use:'vue-loader'
          }
        ]
    },
    plugins: [ // 插件配置
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: 'index.html'
        }),
        new VueLoaderPlugin()
    ],
  }